<template>
  <div class="page-about">
    <div class="page-about-container">
      <Row>
        <Col class="nav-box" span="6">
          <Menu
            class="nav-menu"
            :theme="'light'"
            :active-name="active_tap"
            @on-select="handleSelect"
          >
            <Menu-group :title="$t('locale.pc.about.t1')">
              <Menu-item name="about">
                <Icon type="ios-help-circle-outline" />{{
                  $t("locale.pc.about.t1")
                }}
              </Menu-item>
              <Menu-item name="contact">
                <Icon type="ios-call-outline" />{{ $t("locale.pc.about.t2") }}
              </Menu-item>
            </Menu-group>
          </Menu>
        </Col>
        <Col class="contant-box" span="16">
          <div class="part-title" ref="signal-about">
            {{ $t("locale.pc.about.t1") }}
          </div>
          <div class="part-box">
            <div class="part-item">
              <div class="part-intr">
                {{ web_info.ABOUT_US }}
              </div>
            </div>
          </div>
          <div class="part-title" ref="signal-contact">
            {{ $t("locale.pc.about.t2") }}
          </div>
          <div class="part-box">
            <div class="part-item">
              <van-icon name="phone-o" />
              <span>{{ web_info.TEL }}</span>
            </div>
            <div class="part-item">
              <Icon type="md-phone-portrait" />
              <span>{{ web_info.MOBILE }}</span>
            </div>
            <div class="part-item">
              <Icon type="ios-mail-outline" />
              <span>{{ web_info.EMAIL }}</span>
            </div>
            <!-- <div class="part-item">
              <i class="iconfont icon-weizhi"></i>
              <span>广东省广州市从化区从化大道南</span>
            </div> -->
            <!-- <div class="part-item">
              <no-ssr>
                <el-amap
                  vid="amap"
                  :plugin="plugin"
                  class="amap-demo"
                  :center="center"
                  :zoom="zoom"
                >
                  <el-amap-marker
                    v-for="(marker, index) in markers"
                    :position="marker.position"
                    :key="index"
                    :vid="index"
                    :events="marker.events"
                  ></el-amap-marker>
                </el-amap>
              </no-ssr>
            </div> -->
          </div>
        </Col>
      </Row>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
export default {
  components: {},
  data() {
    let self = this;
    return {
      center: [113.335102, 23.132865],
      zoom: 18, //初始化地图层级
      events: {
        init(map) {
          let markers = self.markers;
          markers.forEach((item, index) => {
            AMapUI.loadUI(["overlay/SimpleMarker"], function(SimpleMarker) {
              item = new SimpleMarker({
                map: map,
                position: item.position,
                label: {
                  offset: new AMap.Pixel(20, 20) //修改label相对于maker的位置
                }
              });
            });
          });
        }
      },
      plugin: [],
      markers: [
        {
          position: [113.335102, 23.132865],
          events: {
            click: () => {}
          },
          visible: true,
          clickable: true
        }
      ],
      refs_offsets: {},
      active_tap: "",
      header_height: 0
    };
  },
  computed: {
    ...mapState({
      web_info(state) {
        return state.web_info;
      }
    })
  },
  watch: {},
  methods: {
    handleSelect(e) {
      this.scrollTo(this.refs_offsets["signal-" + e] - 80);
    },
    scrollTo(top_far) {
      if (!window.scrollTo) {
        window.scrollTo = function(x, y) {
          window.pageXOffset = x;
          window.pageYOffset = y;
        };
      }
      if (!document.body.scrollTo) {
        Element.prototype.scrollTo = function(x, y) {
          this.scrollLeft = x;
          this.scrollTop = y;
        };
      }
      top_far = Math.ceil(top_far);
      let current_scroll_top =
        document.documentElement.scrollTop ||
        document.body.scrollTop ||
        window.pageYOffset;
      current_scroll_top = Math.ceil(current_scroll_top);
      let distant = current_scroll_top;
      //距离分成65份，定时器每10毫秒增加一份距离，使滚动时间可以控制在300毫秒
      let timer = setInterval(() => {
        if (distant < top_far) {
          const speed = Math.ceil((top_far - current_scroll_top) / 30);
          distant += speed;
          if (distant >= top_far) {
            window.scrollTo(0, top_far);
            return clearInterval(timer);
          }
          window.scrollTo(0, Math.ceil(distant));
        } else if (distant > top_far) {
          const speed = Math.ceil((current_scroll_top - top_far) / 30);
          distant -= speed;
          if (distant <= top_far) {
            window.scrollTo(0, top_far);
            return clearInterval(timer);
          }
          window.scrollTo(0, Math.ceil(distant));
        } else {
          return clearInterval(timer);
        }
      }, 10);
    },
    setTapActived() {
      let current_scroll_top =
        document.documentElement.scrollTop ||
        document.body.scrollTop ||
        window.pageYOffset;

      // 第一项的active
      if (current_scroll_top <= this.header_height) {
        this.active_tap = Object.keys(this.refs_offsets).map((i, x) => {
          if (x === 0) {
            return i.split(/signal-/)[i.split(/signal-/).length - 1];
          }
        })[0];
      } else {
        //非第一项的active
        Object.keys(this.refs_offsets).map((i, x) => {
          let id = i.split(/signal-/)[i.split(/signal-/).length - 1];
          if (x < Object.keys(this.refs_offsets).length - 1) {
            let min_range = this.refs_offsets[i] - this.header_height;
            let max_range = this.refs_offsets[
              Object.keys(this.refs_offsets).filter((im, ix) => {
                return ix == x + 1;
              })[0]
            ];
            if (
              min_range <= current_scroll_top &&
              max_range > current_scroll_top
            ) {
              this.active_tap = id;
            }
          } else {
            let last_dom_name = Object.keys(this.refs_offsets).filter(
              (im, ix) => {
                return ix == Object.keys(this.refs_offsets).length - 1;
              }
            )[0];
            let min_range = this.refs_offsets[last_dom_name];
            if (min_range - this.header_height <= current_scroll_top) {
              this.active_tap = id;
            }
          }
        });
      }
    },
    queryToTap() {
      const { signal } = this.$route.query;
      this.scrollTo(this.refs_offsets["signal-" + signal] - 80);
    }
  },
  created() {
    this.$nextTick(() => {
      window.scrollTo(0, 0);
      document.documentElement.scrollTop = 0;
      Object.keys(this.$refs).map((i, x) => {
        if (this.$refs[i] !== undefined && /signal/.test(i)) {
          let origin_offset_height =
            this.$refs[i].getBoundingClientRect().top ||
            this.$refs[i].getBoundingClientRect().y;
          this.refs_offsets = {
            ...this.refs_offsets,
            [i]: Math.ceil(origin_offset_height)
          };
        }
      });
      this.header_height = document.querySelector(
        ".header-container"
      ).scrollHeight;
      document.addEventListener("scroll", this.setTapActived, false);
      this.setTapActived();
      this.queryToTap();
    });
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
.page-about {
  padding-top: 30px;
  min-height: calc(100vh - 427px);
  .page-about-container {
    margin: auto;
    max-width: 1200px;
    .part-title {
      font-size: 26px;
      color: #666;
    }
    .part-box {
      margin-bottom: 25px;
      .part-item {
        color: #393939;
        font-size: 18px;
        > span {
          font-size: 18px;
        }
        .part-intr {
          line-height: 1.4;
        }
      }
      .part-item {
        margin-top: 35px;
      }
    }
  }
}
</style>
<style lang="scss">
.page-about {
  .nav-box {
    min-height: 100px;
    .nav-menu {
      position: fixed;
      width: 300px;
    }
  }
  .contant-box {
    margin-bottom: 50px;
    padding-left: 35px;
    border-left: 1px solid #dcdee2;
  }
  .ivu-menu-vertical.ivu-menu-light:after {
    display: none;
  }
  .ivu-menu-item-group-title {
    height: 65px;
    line-height: normal;
    font-size: 30px;
    color: #333;
  }
  .ivu-menu-item {
    font-size: 22px;
    .ivu-icon {
      font-size: 26px;
    }
  }
  .part-item {
    i {
      margin-right: 5px;
      font-size: 30px;
      color: var(--theme-color);
      vertical-align: middle;
    }
  }
  .el-vue-amap-container,
  .el-vue-amap-container .el-vue-amap {
    height: 400px;
  }
}
</style>
